<template>
  <div class="box">
    <div id="app"> </div>
   <div ref="scriptContainer"></div>
    <!-- 粒子 -->
    <vue-particles
        color="#fff"
        :particleOpacity="0.3"
        :particlesNumber="60"
        shapeType="star"
        :particleSize="3"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.3"
        :linesDistance="140"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
        
      ></vue-particles>
    <div class="container">
      <button class="cta" v-if="!bol" @click="Switch(0)">
        <span>Switch user</span>
        <svg width="15px" height="10px" viewBox="0 0 13 10">
          <path d="M1,5 L11,5"></path>
          <polyline points="8 1 12 5 8 9"></polyline>
        </svg>
      </button>
      <div class="heading">Sign In</div>
      <form  class="form">
        <input
        autocomplete="auto"
          required=""
          class="input"
          type="text"
          :name="statetext[state]"
          id="email"
          :placeholder="statetext[state]"
          @input="event => input(event.target.value, 1)"/>
        <input
          required=""
          class="input"
          type="password"
          name="password"
          id="password"
          placeholder="Password"
          @input="event => input(event.target.value, 2)"

        />
        <span class="forgot-password"><a href="#">Forgot Password ?</a></span>
        <input class="login-button"  value="Sign In" @click="Sign()" />
      </form>
      <div class="social-account-container">
        <span class="title">Or Sign in with</span>
        <div class="social-accounts" v-if="bol">
          <button class="social-button google" @click="Switch(1)">
            <svg
              class="svg"
              xmlns="http://www.w3.org/2000/svg"
              height="1em"
              viewBox="0 0 488 512"
            >
              <path
                d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
              ></path>
            </svg>
          </button>
          <button class="social-button apple" @click="Switch(2)">
            <svg
              t="1715698860753"
              class="svg"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="9507"
              width="1em"
              height="1em"
            >
              <path
                d="M857.07264 155.96032a121.85088 121.85088 0 0 0-26.17856-2.85696H193.10592c-8.99072 0-17.74592 1.00352-26.17856 2.85696C109.90592 165.95968 66.56 215.69024 66.56 275.57888v473.83552c0 67.09248 54.38976 121.48224 121.48224 121.48224h647.9104c67.09248 0 121.48224-54.38976 121.48224-121.48224V275.57888c0.00512-59.88864-43.3408-109.6192-100.36224-119.61856z m-31.31392 68.99712l-265.4464 247.38816c-13.16352 12.26752-30.32064 19.0208-48.31232 19.0208s-35.1488-6.7584-48.31232-19.02592L198.24128 224.95744h627.51744z m60.81536 524.45184c0 27.90912-22.7072 50.61632-50.61632 50.61632H188.04224c-27.90912 0-50.61632-22.7072-50.61632-50.61632V275.57888c0-3.27168 0.33792-6.45632 0.93184-9.55904l277.01248 258.16576c27.2128 25.36448 61.92128 38.04672 96.62976 38.04672s69.41696-12.68224 96.62976-38.04672l277.01248-258.16576c0.59392 3.0976 0.93184 6.28736 0.93184 9.55904v473.8304z"
                fill="#ffffff"
                p-id="9508"
              ></path>
            </svg>
          </button>
          <button class="social-button phone" @click="Switch(3)">
            <svg
              t="1715698774274"
              class="svg"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="8464"
              width="1em"
              height="1em"
            >
              <path
                d="M701.44 138.24c16.896 0 30.72 13.824 30.72 30.72v686.08c0 16.896-13.824 30.72-30.72 30.72H322.56c-16.896 0-30.72-13.824-30.72-30.72V168.96c0-16.896 13.824-30.72 30.72-30.72h378.88m0-61.44H322.56c-50.688 0-92.16 41.472-92.16 92.16v686.08c0 50.688 41.472 92.16 92.16 92.16h378.88c50.688 0 92.16-41.472 92.16-92.16V168.96c0-50.688-41.472-92.16-92.16-92.16z"
                p-id="8465"
              ></path>
              <path
                d="M734.72 756.224h-445.44c-32.256 0-58.88 26.112-58.88 58.88v44.544c0 32.256 26.112 58.88 58.88 58.88h445.44c32.256 0 58.88-26.112 58.88-58.88v-44.544c0-32.768-26.624-58.88-58.88-58.88z m-223.744 120.32c-25.6 0-46.592-20.992-46.592-46.592s20.992-46.592 46.592-46.592 46.592 20.992 46.592 46.592-20.992 46.592-46.592 46.592z"
                p-id="8466"
              ></path>
            </svg>
          </button>
        </div>
      </div>
      <!-- <span class="agreement"
        ><a href="#">Learn user licence agreement</a></span
      > -->
    </div>
 
   
  </div>
</template>

<script scoped>
// 花瓣特效导入
import  '../../unitils/huaban.js'
import {mapActions} from 'vuex'
export default {
  name: "login",
  data() {
    return {
      name: "",
      pwd: "",
      state: 0,
      statetext: ["name", "goole", "email", "phone"],
      bol:true
    };
  },
  mounted(){
      

  },
  methods:{
    ...mapActions("user",["login"]),
    // 同步input
    input(e,i){
      if(i == 1){
        this.name = e
      }else{
        this.pwd = e
      }
    },
    // 切换登录方式
    Switch(e){
      this.bol = !this.bol
      this.state = e
    },
    // 登录
    Sign(){
      let x = ['caolei','bhujiklokip@gmail.com','363444533@qq.com','17623596253']
      if(this.name == '' || this.pwd == ''){
         this.$message({
          message: this.statetext[this.state] + '或passwrod不能为空！',
          type: 'warning'
        });
      }
      if(this.name == x[this.state]){
        if(this.pwd == 'caolei722'){
        this.$message({
          message: '登录成功',
          type: 'success'
        });
        
        this.login({name:this.name,pwd:this.pwd})
        }else{
        this.$message.error('密码输入错误！');
        }
      }else{
        this.$message.error(this.statetext[this.state] + '不存在！');
      }
    }
    
  }
};
</script>

<style lang="less" scoped>
  .lizi{
    // position: absolute;
    position: fixed;
    z-index: 0;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
  }
.box {
  width: 100vw;
  height: 100vh;
  background: url("~@/assets/imag/background.jpg") no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  z-index: 2;
  max-width: 350px;
  opacity: 0.9;
  height: 450px;
  background: #f8f9fd;
  position: relative;
  background: linear-gradient(
    0deg,
    rgb(255, 255, 255) 0%,
    rgb(244, 247, 251) 100%
  );
  border-radius: 40px;
  padding: 25px 35px;
  border: 5px solid rgb(255, 255, 255);
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 30px 30px -20px;
  margin: 20px;
  .heading {
    text-align: center;
    font-weight: 900;
    font-size: 30px;
    color: rgb(16, 137, 211);
  }
  .form {
    margin-top: 20px;
    .input {
      width: 90%;
      background: white;
      border: none;
      padding: 15px 20px;
      border-radius: 20px;
      margin: 15px auto 0;
      box-shadow: #cff0ff 0px 10px 10px -5px;
      border-inline: 2px solid transparent;
      &::-moz-placeholder {
        color: rgb(170, 170, 170);
      }
      &::placeholder {
        color: rgb(170, 170, 170);
      }
      &:focus {
        outline: none;
        border-inline: 2px solid #12b1d1;
      }
    }
    .forgot-password {
      display: block;
      margin-top: 10px;
      margin-left: 10px;
    }
    .forgot-password a {
      font-size: 11px;
      color: #0099ff;
      text-decoration: none;
    }
    .login-button {
      text-align: center;
      cursor: pointer;
      display: block;
      width: 100%;
      font-weight: bold;
      background: linear-gradient(
        45deg,
        rgb(16, 137, 211) 0%,
        rgb(18, 177, 209) 100%
      );
      color: white;
      padding-block: 15px;
      margin: 20px auto;
      border-radius: 20px;
      box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 20px 10px -15px;
      border: none;
      transition: all 0.2s ease-in-out;
    }
    .login-button:hover {
      transform: scale(1.03);
      box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 23px 10px -20px;
    }
    .login-button:active {
      transform: scale(0.95);
      box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 15px 10px -10px;
    }
  }
}

.social-account-container {
  margin-top: 25px;
  .title {
    cursor: pointer;
    display: block;
    text-align: center;
    font-size: 10px;
    color: rgb(170, 170, 170);
  }
  .social-accounts {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 5px;
    .social-button {
      background: linear-gradient(
        45deg,
        rgb(0, 0, 0) 0%,
        rgb(112, 112, 112) 100%
      );
      cursor: pointer;
      border: 5px solid white;
      padding: 5px;
      border-radius: 50%;
      width: 40px;
      aspect-ratio: 1;
      display: grid;
      place-content: center;
      box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 12px 10px -8px;
      transition: all 0.2s ease-in-out;
      .svg {
  fill: white;
  margin: auto;
}
      &:hover {
        transform: scale(1.2);
      }
      &:active {
        transform: scale(0.9);
      }
    }
  }
}

.agreement {
  display: block;
  text-align: center;
  margin-top: 15px;
}

.agreement a {
  text-decoration: none;
  color: #0099ff;
  font-size: 9px;
}

.cta {
  position: absolute;
  right: 5px;
  bottom: 30px;
  padding: 12px 18px;
  transition: all 0.2s ease;
  border: none;
  background: none;
  cursor: pointer;
}

.cta:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 50px;
  background: #b1dae7;
  width: 45px;
  height: 45px;
  transition: all 0.3s ease;
}

.cta span {
  position: relative;
  font-family: "Ubuntu", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #234567;
}

.cta svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #234567;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
}

.cta:hover:before {
  width: 100%;
  background: #b1dae7;
}

.cta:hover svg {
  transform: translateX(0);
}

.cta:active {
  transform: scale(0.95);
}
</style>